<template>
    <div class>
        <div class="row mb-1">
            <div class="col">
                <el-button type="primary" @click="dialogVisible = true">发送短信</el-button>
            </div>
        </div>
        <div class="row  mb-1">
            <div class="col">
                <el-table :data="tableData" border height="75vh" style="width: 100%">
                    <el-table-column prop="username" label="用户名称"></el-table-column>
                    <el-table-column prop="phonenum" label="手机号码"></el-table-column>
                    <el-table-column prop="state" label="发送状态"></el-table-column>
                    <el-table-column prop="createdAt" sortable="custom"
                        :formatter="({ createdAt }) => TimeYH(createdAt)" label="发布时间"></el-table-column>
                </el-table>
            </div>
        </div>
        <div class="row  mb-1">
            <div class="col">
                <el-pagination :hide-on-single-page="true" @current-change="handleCurrentChange"
                    :page-size="Number(formquery._limit)" layout="prev, pager, next" :total="count"></el-pagination>
            </div>
        </div>
        <el-dialog title="短信通知" v-model="dialogVisible" width="80%">
            <el-form :model="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="选择短信模板">
                    <el-select v-model="ruleForm.codeid">
                        <el-option value="SMS_234407617" label="比赛开通通知"></el-option>
                        <el-option value="SMS_236875134" label="比赛报名成功短信"></el-option>
                    </el-select>
                </el-form-item>
                <div class="row">
                    <div class="col text-right">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="submit">确 定</el-button>
                    </div>
                </div>
            </el-form>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, watch } from 'vue';
import { asynccreatedsms, asyncgetteam, asyncselectactivityuser, asyncselectsms, asyncselectteamuser, Iobj } from '../../../api';
import Studycodemodel from '../../../mysql_interface/studycodemodel';
import { TimeYH } from '../../../util/time';

const dialogVisible = ref(false)

const prop = defineProps<{ ID?: number | string, data: Studycodemodel.Iactivity }>()

const formquery = reactive<Iobj<Studycodemodel.Isms>>({
    _offset: 0,
    _limit: 20
})

const isAdmin = ref(0)




function change(e: any) {
    ruleForm.isAdmin = e
}

const getusers = ref<{ value?: number, label?: string }[]>([])


const ruleForm = reactive<any>({
    activityid: prop.data.ID,
    userid: [],
    codeid: 'SMS_234407617',
})

const tableData = ref<Studycodemodel.Isms[]>([])
const count = ref(0)
async function start() {
    formquery.activityid = prop.data.ID
    const data = await asyncselectsms(formquery)
    tableData.value = data.rows
    count.value = data.count
    const activityuser = await asyncselectactivityuser({
        activityid: prop.data.ID
    })
    getusers.value = activityuser.rows.map(e => {
        return {
            value: e.userid,
            label: e.user?.name
        }
    })
    if (prop.data.teamid) {
        const team = await asyncgetteam({
            ID: prop.data.teamid
        })
        getusers.value = getusers.value.concat({ value: team.userid, label: team.user?.name })
        const teamuser = await asyncselectteamuser({
            teamid: prop.data.teamid
        })
        getusers.value = getusers.value.concat(...teamuser.rows.map(e => {
            return {
                value: e.userid,
                label: e.user?.name
            }
        }))
        ruleForm.teamid = prop.data.teamid

    }
    ruleForm.userid = getusers.value.map(e => e.value)
}

function handleCurrentChange(val: number) {
    formquery._offset = Number(formquery._limit) * (val - 1);
}

async function submit() {
    await asynccreatedsms(ruleForm)
    dialogVisible.value = false
    start();
}


watch(formquery, e => {
    start()
})


onMounted(() => {
    start()
})



</script>

<style scoped></style>